﻿<!DOCTYPE html >
	<html>
		<head>
		<meta charset=utf-8" />
		<title></title>
		<style>
			body,ul,input{
				margin:0;
				padding:0;
				font-family:'微软雅黑';
			}
			em{
				font-style:normal;
				}
			li{
				list-style:none
				}
			a{
				text-decoration:none;
				}
			img{
				border:none;
				vertical-align:top;
				}
			.box{ 
				width:1100px;
				margin-left:300px; 
				}
			.box p{ 
				float:left; 
				padding:20px; 
				background:#fff; 
				color:#000; 
				font-size:20px; 
				line-height:30px; 
				border:70px solid #CCC; 
				width:500px;
				}
			.box p span{ 
				color:#FFF; 
				background:#FC9
				}
			.find{ 
				width:100px; 
				float:left; 
				padding-top:30px;
				}
			.find a{ 
				display:block; 
				width:100px; 
				height:40px; 
				background:#F90; 
				color:#fff; 
				font-size:24px; 
				text-align:center; 
				line-height:40px;
				}
			.find ul{ d
				isplay:none;  
				overflow:hidden
				}
			.find ul li{ 
				width:100px; 
				height:30px; 
				text-align:center; 
				line-height:30px; 
				background:#E3E3E3; 
				font-size:18px; 
				margin-top:1px; 
				cursor:pointer;
				}
			.find ul li.cur{ 
				background:#FCF
				}
			.replace{ 
				position:relative; 
				display:none; 
				clear:both; 
				overflow:hidden;  
				padding-bottom:30px;
				border:10px solid #F9F;
				float:left; 
				margin-top:20px; 
				width:600px;
				}
			.replace ul{ 
				padding-top:20px; 
				overflow:hidden; 
				width:560px; 
				margin:0 auto; 
				border-bottom:2px solid #ccc;
				}
			.replace ul li{ 
				cursor:pointer; 
				float:left; 
				height:36px; 
				line-height:36px; 
				width:100px; 
				text-align:center;   
				}
			.replace ul li.cur{
				background:#e73100; 
				color:#FFF 
				}
			.qie_box{ 
				display:none;  
				margin:0 auto; 
				overflow:hidden; 
				padding-top:20px;
				}
			.qie_box input{ 
				margin-left:20px; 
				float:left; 
				width:200px; 
				height:36px; 
				line-height:36px; 
				border:1px solid #ccc;
				}
			.qie_box input.inp{ 
				width:100px; 
				background:#CCF; 
				color:#FFF; 
				font-size:20px; 
				line-height:38px; 
				height:38px; 
				border:none; 
				cursor:pointer;
				}
			.replace a{ 
				display:block; 
				font-size:40px; 
				line-height:60px; 
				position:absolute; 
				right:0; 
				top:-20px; 
				color:#000;
				}
			</style> 

		</head>
	<body>
		<div class="box">
			<p>伴云起，逐月落，随着时光流逝，凋零一季芳菲，只留下一缕圣洁馨香。
　　潮生潮灭，沧海桑田，忧伤，感怀，无奈，曼妙着人生境界。
　　从春雨霏霏到雪花飘飘，静静的任凋落的心事轻轻飘飞，弄潮着风景，演绎着蝶恋花似的剧情。
　　淡淡一笑，三千青丝纠结的尘缘，寻了些模糊的影，恍惚如画，浓或淡，掠过头顶，如云似雾飘散！
　　静静地跌倒在千年的梦里，一袭青衫，叠过江南的水，温漉漉地在梦的长河里漫游，久远的儒雅。
　　苦苦寻觅，寂寞伴随，千般华丽的帷幕，海市蜃楼的铺垫，所有都化为红尘一笑。</p>
	    	<div class="find" id="folk">
	    		<a href="#">展开</a>
	        	<ul>
	        		<li>查找</li>
	        		<li>替换</li>
	        	</ul>
	    	</div>
		    <div class="replace" id="replace">
		    	<a href="#">×</a>
		    	<ul>
		        	<li>查找</li>
		        	<li class="cur">替换</li>
		        </ul>
		        <div class="qie_box" style="display:block;">
		        	<input type="text" />
		            <input type="button" value="查找" class="inp" />
		        </div>
		        <div class="qie_box">
		        	<input type="text" />
		            <input type="text" />
		            <input type="button" value="替换" class="inp" />
		        </div>
		    </div> 
		</div>
		<script>
			
			var ofolk = document.getElementById('folk');
			var oP = document.getElementsByTagName('p')[0];
			var oZkA = ofolk.getElementsByTagName('a')[0];
			var oZkUl = ofolk.getElementsByTagName('ul')[0];
			var oZkAl = oZkUl.getElementsByTagName('li');
			var oReplace = document.getElementById('replace');
			var oTiDiv = oReplace.getElementsByTagName('div');
			var oTiA = oReplace.getElementsByTagName('a')[0];
			var oTiUl = oReplace.getElementsByTagName('ul')[0];
			var oTiLi = oTiUl.getElementsByTagName('li');
			var aInp1 = oTiDiv[0].getElementsByTagName('input');
			var aInp2 = oTiDiv[1].getElementsByTagName('input');
			var onOff = true;
			var str = oP.innerHTML
			oZkA.onclick = function(){
				if( onOff ){
					oZkUl.style.display = 'block';
					onOff = false;		
				}else{
					oZkUl.style.display = 'none'
					onOff = true;		
				}	
			}
			for( var i=0;i<oZkAl.length;i++ ){
				oZkAl[i].index = i;
				oZkAl[i].onclick = function(){
					for( var i=0;i<oZkAl.length;i++ ){
						oTiDiv[i].style.display = 'none'
						oTiLi[i].className = ''	
						oZkAl[i].className = ''
					}
						oReplace.style.display = 'block'	
						oTiDiv[this.index].style.display = 'block'
						oTiLi[this.index].className = 'cur'
						this.className = 'cur'
				}	
			}
			for( var i=0;i<oTiLi.length;i++ ){
				oTiLi[i].index = i;
				oTiLi[i].onclick = function(){
					for( var i=0;i<oTiLi.length;i++ ){
						oTiDiv[i].style.display = 'none'
						oTiLi[i].className = ''			
					}
					oTiDiv[this.index].style.display = 'block'	
					this.className = 'cur'	
					aInp1[0].value = ''
					aInp2[0].value = ''
					aInp2[1].value = ''
				}	
			}
			oTiA.onclick = function(){
				oReplace.style.display = 'none'	
			}
			aInp1[1].onclick = function(){		
				var aInp1value = aInp1[0].value;
				if( oP.innerHTML.indexOf(aInp1[0].value) == -1 ){
				 	alert('对不起，您输入的内容查找不到')
				}else if( aInp1[0].value === '' ){
					alert('请输入您要查找的内容')
				}else{
					oP.innerHTML = str.split(aInp1value).join('<span>'+ aInp1value +'</span>');
				}
				aInp1[0].value = ''		
			}
			
			aInp2[2].onclick = function(){
				var aInp2value = aInp2[0].value;
				var newsStr = aInp2[1].value
				if( oP.innerHTML.indexOf(aInp2[0].value) == -1 ){
				 	alert('对不起，您输入的内容查找不到')
				}else if( aInp2[0].value === '' ){
					alert('请输入您要查找的内容')
				}else{
					oP.innerHTML = str.split(aInp2value).join('<span>'+ newsStr +'</span>');
				}
				aInp2[0].value = ''	
				aInp2[1].value = ''	
			}
			
		</script>
		</body>
	</html>